<template>
  <div class="app-container" ref="appContainer">
    <div class="header">
      <el-form :inline="true" class="search-form" :model="inputSearch" ref="ruleFormRef">
        <el-form-item label="请输入用户ID">
          <el-input v-model="inputSearch.searchId" :placeholder="`请输入用户ID`" clearable />
        </el-form-item>
      </el-form>
      <div class="search">
        <el-button type="primary" @click="onclickSearch" :icon="Search">搜索</el-button>
      </div>
    </div>

    <!-- ------------表格--------------->
    <div class="table">
      <el-table v-loading="loading" :data="list" fit highlight-current-row style="width: 100%" :border="true">
        <el-table-column label="代理id" align="center" prop="id" width="125px">
        </el-table-column>
      
        <el-table-column label="代理账号" align="center" prop="username" width="300px">
        </el-table-column>
        <el-table-column label="钻石" align="center" prop="gems" width="100px">
        </el-table-column>
        <el-table-column label="操作" align="center" width="500px">
          <template #default="scope">
            <el-button type="success" @click="onClickCharge(scope.row)">充值</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>

    <!-- ------------分页--------------->
    <!-- <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pagenum" :limit.sync="listQuery.pagesize"
        @pagination="getList" /> -->

    <!-- ------------分页--------------->
    <div class="pagination">
      <el-pagination v-model:currentPage="listQuery.pagenum" :page-size="listQuery.pagesize" background
        layout="total, sizes, prev, pager, next, jumper" :total="pageObj.total" @size-change="handleSizeChange"
        @current-change="getList" />
    </div>


    <el-dialog v-model="dialogVisible" title="玩家充值" width="80%">
      <el-form :model="chargeForm">

        <el-form-item label="用户ID">
          <el-input :value="chargeForm.id" disabled />
        </el-form-item>
        <el-form-item label="账号">
          <el-input :value="chargeForm.username" disabled />
        </el-form-item>
        <el-form-item label="钻石">
          <el-input :value="chargeForm.gems" disabled />
        </el-form-item>

        <el-form-item label="选择充值类型">
          <el-radio-group v-model="chargeForm.type">
            <el-radio label="gem">钻石</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="输入充值数量(负数表示扣除)">
          <el-input v-model="chargeForm.num" type="number" clearable />
        </el-form-item>

      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleRechargeSubmit()">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>


  </div>
</template>
<script lang="ts" setup name="comprehensive">
import { Search } from '@element-plus/icons-vue'
import { computed, ref, reactive, onMounted, nextTick } from 'vue'
import * as dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { Logger } from '@/engine/util/Logger'
import { HttpClient } from '@/utils/HttpClient'
import { da, fa, ro, tr } from 'element-plus/es/locale'
import { UIHelper } from '@/utils/UIHelper'
import { GameConfig } from '@/config/GameConfig'
import { DateUtil } from '@/engine/util/DateUtil'
const loading = ref(true)
const appContainer = ref(null)


const inputSearch = reactive({
  searchId: '',
})

//列表查询选项
const listQuery = reactive({
  pagenum: 1, //第几页
  pagesize: 10, //一页多少个
})

let list = reactive([
  {

  }
])
let pageObj = reactive({
  total: 0
})

const dialogVisible = ref(false)
const chargeForm = reactive({
  id: 1,
  username: '',
  nick: '',
  gems: '',

  type: "gem",
  num: "0"
})



onMounted(() => {
  nextTick(() => {
    // let data = appContainer.value.
  })
  setTimeout(() => {
    loading.value = false
  }, 500)
  getList()
})


const onclickSearch = () => {
  Logger.log('onclickSearch!', inputSearch)
  // if(inputSearch.searchId ==)
  let searchId: number = parseInt(inputSearch.searchId)
  if (isNaN(searchId)) {
    // UIHelper.showMsg("请输入正常的用户id")
    getList()
  } else {
    HttpClient.get_user_info(searchId, (data: object) => {
      formatUserList(data["users"])
    })
  }
}

const handleSizeChange = (val: number) => {
  listQuery.pagesize = val
  getList()
}

const formatUserList = (users: Array<object>) => {
  list.splice(0)
  for (let i = 0; i < users.length; i++) {
    let user = {
      "id": users[i]["id"],
      "username": users[i]["username"],
      "gems": users[i]["gems"],
    }
    list[i] = user
  }
}

const getList = () => {
  loading.value = true;
  HttpClient.get_daili((data: Array<object>) => {
    loading.value = false
    formatUserList(data)
    pageObj.total = data.length
  })
}

const onClickCharge = (row) => {
  Logger.log("onClickCharge", row)
  chargeForm.id = row.id;
  chargeForm.username = row.username
  chargeForm.nick = row.nick
  chargeForm.gems = row.gems
  chargeForm.type = "gem"
  chargeForm.num = "0"

  dialogVisible.value = true
}

const handleRechargeSubmit = () => {
  Logger.log("handleRechargeSubmit=", chargeForm)
  let num: number = parseInt(chargeForm.num)
  if (isNaN(num)) {
    UIHelper.showMsg("请输入正确的充值数额")
  } else {
    dialogVisible.value = false
    HttpClient.charge_to_daili(chargeForm.id,  chargeForm.username, num, chargeForm.type, () => {
      getList()
    })
  }
}


</script>
    
<style scoped lang="scss">
.header {
  display: flex;
  padding: 16px 16px 0 16px;
  margin-bottom: 16px;
  border-radius: 4px;
  background: white;
  box-shadow: 0 0 12px rgb(0 0 0 / 5%);

  .search-form {
    flex: 1;

    ::v-deep {
      .el-input--default {
        width: 200px;
      }
    }
  }

  .search {
    flex-shrink: 0;
    white-space: nowrap;
  }
}
</style>
    